<template>
  <div class="page_main">
    <div class="side_box">
      <div class="service">
        <div class="box_title">服务器报表</div>
        <div class="service_box">
          <div class="service_list">名称</div>
          <div class="service_list">IP</div>
          <div class="service_list">状态</div>
          <div class="service_list">所属平台</div>
          <div class="service_list">主机类型</div>
          <div class="service_list">CUP使用率</div>
          <div class="service_list">内存使用率</div>
          <div class="service_list">磁盘使用率</div>
        </div>
        <div class="swiper_service">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in serverReport" :key="index" :a="item">
              <div class="info_list">{{ item.name }}</div>
              <div class="info_list">{{ item.ip }}</div>
              <div class="info_list normal" :style="{ color: item.status == '运行中' ? '#12D633' : '#ff0000' }">{{
              item.status }}
              </div>
              <div class="info_list">{{ item.platform }}</div>
              <div class="info_list">{{ item.hostType }}</div>
              <div class="info_list">{{ item.cpuUsage }}</div>
              <div class="info_list">{{ item.memoryUsage }}</div>
              <div class="info_list">{{ item.diskUsage }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="warn">
        <div class="box_title">告警信息</div>
        <div class="warn_box">
          <div class="warn_list">名称</div>
          <div class="warn_list">IP</div>
          <div class="warn_list">状态</div>
          <div class="warn_list">所属平台</div>
          <div class="warn_list">主机类型</div>
          <div class="warn_list">任务类型</div>
          <div class="warn_list">时间</div>
          <div class="warn_list">问题数量</div>
        </div>
        <div class="swiper_warn">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in altermsg" :key="index" :a="item">
              <div class="info_list">{{ item.name }}</div>
              <div class="info_list">{{ item.ip }}</div>
              <div class="info_list warn" :style="{ color: item.status == '运行中' ? '#12D633' : '#ff0000' }">{{
              item.status }}
              </div>
              <div class="info_list">{{ item.platform }}</div>
              <div class="info_list">{{ item.hostType }}</div>
              <div class="info_list">{{ item.taskType }}</div>
              <div class="info_list" title="2023-12-12 12:00:00">{{ item.occTime }}</div>
              <div class="info_list question">{{ item.issueCount }}</div>
            </div>
          </div>
        </div>


      </div>
    </div>
    <div class="center_box">
      <div class="statistics">
        <div class="list">
          <div class="label">服务器总数量</div>
          <div class="value">{{ statistics.serversNum }}个</div>
        </div>
        <div class="list">
          <div class="label">运行数量统计</div>
          <div class="value">{{ statistics.running }}个</div>
        </div>
        <div class="list">
          <div class="label">待运行数量统计</div>
          <div class="value">{{ statistics.pending }}个</div>
        </div>
      </div>

      <div class="flow_rate">
        <div class="rate_box">
          <div class="num">{{ trafficVO.maxSending }}</div>
          <div class="label">流量最大发送</div>
        </div>
        <div class="rate_box q">
          <div class="num">{{ trafficVO.minSending }}</div>
          <div class="label">流量最小发送</div>
        </div>
        <div class="rate_box q">
          <div class="num">{{ trafficVO.maxReceiving }}</div>
          <div class="label">流量最大接收</div>
        </div>
        <div class="rate_box">
          <div class="num">{{ trafficVO.minReceiving }}</div>
          <div class="label">流量最小接收</div>
        </div>
      </div>

      <div class="breakdown_box">
        <div class="box_title">故障报表</div>
        <div class="breakdown">
          <div ref="charts1" class="cahrts"></div>
          <div ref="charts2" class="cahrts"></div>
        </div>
      </div>
    </div>
    <div class="side_box">
      <div class="network">
        <div class="box_title">网络设备报表</div>
        <div class="network_box">
          <div class="network_list">设备名称</div>
          <div class="network_list">带宽</div>
          <div class="network_list">吞吐量</div>
          <div class="network_list">丢包率</div>
          <div class="network_list">主机类型</div>
          <div class="network_list">带宽利用率</div>
          <div class="network_list">设备状态</div>
          <div class="network_list">磁盘使用率</div>
        </div>
        <div class="swiper_network">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in equipmentReport" :key="index" :a="item">
              <div class="info_list">{{ item.deviceName }}</div>
              <div class="info_list">{{ item.bandwidth }}</div>
              <div class="info_list">{{ item.throughput }}</div>
              <div class="info_list">{{ item.packetLossRate }}</div>
              <div class="info_list">{{ item.hostType }}</div>
              <div class="info_list">{{ item.bandwidthUtilization }}</div>
              <div class="info_list warn" :style="{ color: item.deviceStatus == '运行中' ? '#12D633' : '#ff0000' }">{{
              item.deviceStatus }}
              </div>
              <div class="info_list">{{ item.diskUsage }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="network_api">
        <div class="box_title">网络设备接口报表</div>
        <div class="network_api_box">
          <div class="network_api_list">名称</div>
          <div class="network_api_list">IP</div>
          <div class="network_api_list">状态</div>
          <div class="network_api_list">所属平台</div>
          <div class="network_api_list">主机类型</div>
          <div class="network_api_list">任务类型</div>
          <div class="network_api_list">时间</div>
          <div class="network_api_list">问题数量</div>
        </div>
        <div class="swiper_network_api">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in interfaceReport" :key="index" :a="item">
              <div class="info_list">{{ item.interfaceName }}</div>
              <div class="info_list">{{ item.ipAddress }}</div>
              <div class="info_list warn">{{ item.abnormal }}</div>
              <div class="info_list">{{ item.platform }}</div>
              <div class="info_list">{{ item.hostType }}</div>
              <div class="info_list">{{ item.category }}</div>
              <div class="info_list" title="2023-12-12 12:00:00">{{ item.occTime }}</div>
              <div class="info_list question">{{ item.issueCount }}</div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import * as echarts from 'echarts';
import api from "@/utils/api/index.js";

export default {
  name: 'SupervisoryControl',

  data() {
    return {
      myChart1: null,
      myChart2: null,
      serverReport: [],
      altermsg: [],
      equipmentReport: [],
      interfaceReport: [],
      statistics: {
        serversNum: 0,//服务器总数量
        running: 0,//运行数量统计
        pending: 0,//待运行数量统计
      },
      trafficVO: {//流量统计数据
        maxReceiving: 0,//最大接收流量
        maxSending: 0,//最大发送流量
        minReceiving: 0,//最小接收流量
        minSending: 0,//最小发送流量

      },
      swiper_service: null,
      swiper_warn: null,
      swiper_network: null,
      swiper_network_api: null,




    }
  },
  beforeDestroy() {
    this.clearData();
  },
  mounted() {
    this.initCharts()

    // this.initSwiperService()
    // this.initSwiperWarn()
    // this.initSwiperNewwork()
    // this.initSwiperNewworkApi()
    // this.initCharts1()
    // this.initCharts2()
  },

  methods: {
    initCharts() {
      this.myChart1 = echarts.init(this.$refs.charts1)
      this.myChart2 = echarts.init(this.$refs.charts2)
      this.getData()
      this.switper()
    },
    /**
   * 获取数据
   */
    async getData() {
      var that = this;
      await api.getJK({}).then(({ data }) => {
        if (data.code == 200) {
          console.log("监控", data);
          that.setData(data.result);
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = () => {
        this.getData();
        // this.getMock()
      };
      this.timer = setInterval(
        looper,
        this.$store.state.echartsAutoTime
      );

    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    setData(result) {
      var that = this;
      that.trafficVO = result.trafficVO;
      that.statistics = result.statistics
      // 服务器报表
      if (result.serverReport) {
        that.serverReport = result.serverReport
        that.$nextTick(() => {
          that.initSwiperService()
        })
      }
      // 告警
      if (result.altermsg) {
        that.altermsg = result.altermsg
        that.$nextTick(() => {
          that.initSwiperWarn()
        })
      }
      // 网络设备报表
      if (result.equipmentReport) {
        that.equipmentReport = result.equipmentReport
        that.$nextTick(() => {
          that.initSwiperNewwork()
        })

      }
      if (result.interfaceReport) {
        that.interfaceReport = result.interfaceReport
        that.$nextTick(() => {
          that.initSwiperNewworkApi()
        })
      }
      if (result.faultReport) {
        that.initCharts1(result.faultReport)
      }
      if (result.faultReportLine) {
        var xName = []
        var values = []
        result.faultReportLine.forEach(element => {
          xName.push(element.name)
          values.push(element.value)
        });
        that.initCharts2(xName, values)
      }

    },
    initSwiperService() {
      // if (this.swiper_service == null) {
        this.swiper_service = new Swiper(".swiper_service", {
          slidesPerView: '8',
          loop: true, // 循环模式选项
          direction: 'vertical', // 垂直切换选项
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },//可选选项，自动滑动
          spaceBetween: 0,
          ovserver: true,
          ovserverParents: true
        })
      // }

    },
    initSwiperWarn() {
      // if (!this.swiper_warn)
        this.swiper_warn = new Swiper(".swiper_warn", {
          slidesPerView: '8',
          loop: true, // 循环模式选项
          direction: 'vertical', // 垂直切换选项
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },//可选选项，自动滑动
          spaceBetween: 0,
          ovserver: true,
          ovserverParents: true
        })
    },
    initSwiperNewwork() {
      // if (!this.swiper_network)
        this.swiper_network = new Swiper(".swiper_network", {
          slidesPerView: '8',
          loop: true, // 循环模式选项
          direction: 'vertical', // 垂直切换选项
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },//可选选项，自动滑动
          spaceBetween: 0,
          ovserver: true,
          ovserverParents: true
        })
    },
    initSwiperNewworkApi() {
      // if (!this.swiper_network_api)
        this.swiper_network_api = new Swiper(".swiper_network_api", {
          slidesPerView: '8',
          loop: true, // 循环模式选项
          direction: 'vertical', // 垂直切换选项
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },//可选选项，自动滑动
          spaceBetween: 0,
          ovserver: true,
          ovserverParents: true
        })
    },
    initCharts1(data) {
      var myChart = this.myChart1;
      // const dom = this.$refs.charts1;
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        color: ['#DB4963', '#1B9FA6', '#FFFFFF', '#F0A953'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '10%',
          // left: 'center',
          orient: 'vertical',
          icon: 'rect',
          itemWidth: 8, // 正方形的宽度
          itemHeight: 8, // 正方形的高度
          textStyle: {
            color: '#fff',  // 图例文字颜色为白色
            fontSize: 12,      // 图例文字大小
            fontWeight: 'normal',  // 字体粗细（可选值：'normal', 'bold', 'bolder', 'lighter'）
            fontFamily: 'Arial',   // 字体类型
            lineHeight: 14,        // 设置行高
          },
        },
        series: [
          {
            name: '故障报表',
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
            // data: [
            //   { value: 1048, name: '人祸', itemStyle: { color: '#DB4963' } },
            //   { value: 735, name: '地质灾害', itemStyle: { color: '#1B9FA6' } },
            //   { value: 580, name: '水灾', itemStyle: { color: '#FFFFFF' } },
            //   { value: 484, name: '火灾', itemStyle: { color: '#F0A953' } },
            // ]
          }
        ]
      }
      // 设置图表选项并渲染
      myChart.setOption(option);
    },
    initCharts2(xName, values) {
      var myChart = this.myChart2;
      // const dom = this.$refs.charts2
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        grid: {
          left: '10%',
          right: '5%',
          bottom: '20%',
          top: '10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xName,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: '#666',
              type: 'dashed'
            }
          }
        },
        series: [{
          data: values,
          type: 'line',
          smooth: false,  // 平滑曲线
          areaStyle: {   // 阴影区域
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(82, 164, 155, 0.6)' },
              { offset: 1, color: 'rgba(82, 164, 155, 0)' },
            ])
          },
          lineStyle: {
            color: '#52A49B',  // 折线颜色
            width: 2
          },
          itemStyle: {
            color: '#B5FFF7'  // 点的颜色
          },
          symbol: 'circle',  // 不显示点
          label: {
            show: false,
            position: 'top',
            color: '#FFF',
            fontSize: 12,
            formatter: '{c}'  // 显示数值
          }
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#FF5650',
              width: 1
            }
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: '#00D8FF',
          borderWidth: 1,
          textStyle: {
            color: '#FFF'
          },
          formatter: function (params) {
            return params[0].name + '<br/>故障报表: ' + params[0].value;
          }
        },
        backgroundColor: 'transparent'  // 背景颜色
      };
      // 设置图表选项并渲染
      myChart.setOption(option);
    },
  }
}
</script>
<style scoped lang="scss">
.page_main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .side_box {
    width: 37.47%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .service {
      width: 100%;
      height: 49.5%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .service_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .service_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }

      .swiper_service {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc((100% / 8) - 6px);
              padding: 0 3px;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.warn {
                color: #DB4963;
              }

              &.normal {
                color: #10B27E;
              }
            }
          }
        }
      }





    }

    .warn {
      width: 100%;
      height: 49%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .warn_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .warn_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }

      .swiper_warn {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc((100% / 8) - 6px);
              padding: 0 3px;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.question {
                color: #FCD159;
              }

              &.warn {
                color: #DB4963;
              }

              &.normal {
                color: #10B27E;
              }
            }
          }
        }
      }
    }

    .network {
      width: 100%;
      height: 49%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .network_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .network_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }

      .swiper_network {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc((100% / 8) - 6px);
              padding: 0 3px;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.question {
                color: #FCD159;
              }

              &.warn {
                color: #DB4963;
              }

              &.normal {
                color: #10B27E;
              }
            }
          }
        }
      }
    }

    .network_api {
      width: 100%;
      height: 49%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .network_api_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .network_api_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;
        }
      }

      .swiper_network_api {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc((100% / 8) - 6px);
              padding: 0 3px;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &.question {
                color: #FCD159;
              }

              &.warn {
                color: #DB4963;
              }

              &.normal {
                color: #10B27E;
              }
            }
          }
        }
      }
    }


  }

  .center_box {
    width: 22.32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .statistics {
      width: 100%;
      height: 16.24%;
      display: flex;
      align-items: center;
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      background: #00538A;

      .list:nth-child(odd) {
        background: #073B62;
      }

      //奇数行
      .list:nth-child(even) {
        background: #022E51;
      }

      .list {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .label {
          height: 40%;
          width: 100%;
          box-sizing: border-box;
          border-bottom: 1px solid #005072;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #1A9ACB;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .value {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
          font-weight: 400;
          font-size: 16px;
          color: #30BEF4;
        }
      }
    }

    .flow_rate {
      height: 28.14%;
      width: 100%;
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: #022E51;

      .rate_box {
        width: 50%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        &.q {
          background: #073B62;
        }

        .num {
          font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
          font-weight: 400;
          font-size: 30px;
          color: #30BEF4;
        }

        .label {
          margin-top: 5px;
          padding: 7px 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          border: 1px solid #1A9ACB;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #1A9ACB;
        }
      }
    }

    .breakdown_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 50%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .breakdown {
        height: calc(100% - 45px);
        width: 100%;

        .cahrts {
          width: 100%;
          height: 50%;
        }
      }
    }
  }
}

.box_title {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #003F5A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
  font-weight: 400;
  font-size: 18px;
  box-sizing: border-box;
  color: #1A9ACB;
}
</style>